// src/views/Home.jsx
// import './cataglog.css'
// export default function Home(){
//     return (
//         <>
//             <div className="main">
//                 <h3>react学习目录</h3>
//                 <div className="catalog-labels"></div>
//             </div>
//         </>
//     )
// }
import React from 'react'
// import { useNavigate } from 'react-router-dom';

import './cataglog.css'
interface GoodItem {
    id:number;
    name:string;
    path:string;
}
interface HomeState{
    good:GoodItem[]
}
class Home extends React.Component<{},HomeState> {
    constructor(pros: any) {
        super(pros)
        this.state = {
            good: [{
                id: 1,
                name: '路由的配置',
                path:'/about',
            },
            {
                id: 2,
                name: '组件的熟悉',
                path:'about'
            },
            {
                id: 3,
                name: '组件的通信',
                path:'/parent'
            },
            ]
        }
    }
    // hanleClick = (item: GoodItem) => {
    //     const navigate = useNavigate();
    //     navigate(item.path);
    // };
    render() {
        return (
            <>
                <div className="main">
                    <h3>react学习目录</h3>
                    <div className="catalog-labels">
                        <ul>
                        {this.state.good.map(item=>{
                            return <li key={item.id}>{item.name}</li>
                        })}
                        </ul>
                    </div>
                </div>
            </>
        )
    }
}
export default Home